<template>
	<view class="content">


		<u-sticky style="background: #fff;">
			<topbar :title='title' :userInfo="userInfo" @success="successHandel" :showList="false" />


			<u-line color="#c9c9c9"></u-line>
		</u-sticky>




		<scroll-view style="height: 100%;" scroll-y="true" class="scroll-Y">

			<u-cell-group>
				<view v-for="(item, index) in swiperList" :key="index">

					<u-cell size="large" :title="item.name" :label="item.createTime" @click.stop="deteleHandel(item)">

						<u-icon slot="icon" size="40"
							:custom-prefix="item2.type === 1 ? 'custom-icon-wj custom-icon' : 'custom-icon-wenjianjia custom-icon'"
							color="#4C75FF"></u-icon>


						<view slot="value" @click.stop="moreHandel(item)">
							<u-icon slot="icon" size="20" name="more-dot-fill" color="#4C75FF"></u-icon>
						</view>
					</u-cell>

				</view>

			</u-cell-group>

			<u-empty v-if="swiperList.lenght == 0" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"
				text="暂时没有数据" textSize="18" />

		</scroll-view>




		<u-popup :show="show" @close="close" :customStyle="popupStyle">
			<view class="file_name">{{ fileObj.name }}</view>
			<view class="menu">
				<button open-type="share" v-if="showShare && queryType != 'DELETE'">
					<u-icon name="share-square" color="#4C75FF" size="35" label="协作/分享" labelPos="bottom"></u-icon>
				</button>

				<u-icon v-if="showEye" name="eye" color="#4C75FF" size="35" label="预览" labelPos="bottom"
					@click="preview"></u-icon>

				<u-icon name="edit-pen" color="#4C75FF" size="35" label="重命名" labelPos="bottom" @click="rename"></u-icon>

				<u-icon v-if="showMove && queryType != 'DELETE'" name="cut" color="#4C75FF" size="35" label="移动"
					labelPos="bottom" @click="moveHandel"></u-icon>

				<u-icon v-if="queryType != 'DELETE'" name="trash" color="#4C75FF" size="35" label="删除" labelPos="bottom"
					@click="delHadel"></u-icon>


				<u-icon v-else name="reload" color="#4C75FF" size="35" label="还原" labelPos="bottom"
					@click="reductionHandel"></u-icon>

			</view>
		</u-popup>




		<u-modal :show="showModal" title="修改文件名" @cancel="cancel" @confirm="confirm" :showCancelButton="true">
			<view class="slot-content">
				<u--input placeholder="请输入文件名称" border="surround" v-model="fileName"></u--input>
			</view>
		</u-modal>


		<u-modal :show="moveModal" title="选择文件夹" @cancel="moveCancel" @confirm="moveConfirm" :showCancelButton="true">
			<view class="slot-content">
				<u--form labelPosition="left" :model="folderName" labelWidth="80" ref="uForm">


					<u-form-item label="目标文件夹" prop="folderName" borderBottom ref="item" @click="treepickerShow">
						<u--input v-model="folderName" disabled disabledColor="#ffffff" border="none"></u--input>
					</u-form-item>

				</u--form>
				<mytreepicker ref="treePicker" :multiple="false" :range="columns" :foldAll="true" rangeKey="name"
					idKey="folderId" @confirm="treeConfirm" @cancel="treeCancel" :selectParent="true"></mytreepicker>
			</view>
		</u-modal>

		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import { getUserInfo, getUserFileList, deleteFile, saveFileData, getFolder, delFolder } from '@/api/api'
import { mapState, mapMutations } from 'vuex'
export default {
	data() {
		return {
			columns: [],
			showShare: true,
			showEye: true,
			showMove: true,
			moveModal: false,
			pickerShow: false,
			folderName: "",
			current: 0,
			swiperList: [],
			userInfo: {},
			queryType: "NORMAL",
			show: false,
			fileName: '',
			fileObj: {},
			title: "",
			showModal: false,
			rules: {
				"folderName": {
					type: 'string',
					required: true,
					message: '请选择文件夹',
					trigger: ['blur', 'change']
				},
			},
		};
	},
	computed: {
		...mapState(['teamStatus', 'folderId', "currentTeamId"])
	},
	onLoad: function (option) {
		const item = JSON.parse(decodeURIComponent(option.item));
		this.title = item.name
		this.setFolderId(item.folderId)
		this.getList({ queryType: this.queryType, folderId: this.folderId })
		getUserInfo().then(res => {
			this.userInfo = res.data
		})
	},
	onShareAppMessage(res) {
		return {
			title: `分享文件：${this.fileObj.name}`,
			path: `/pages/index/detail/detail?fileId=${this.fileObj.fileId}`
		}
	},
	methods: {
		...mapMutations([
			"personHandel", "teamHandel", "setFolderId",
		]),
		treeCancel() {
			this.$refs.treePicker._hide()
		},
		treepickerShow() {
			this.$refs.treePicker._show()
		},
		moveHandel() {
			this.moveModal = true
			this.show = false
			if (!this.teamStatus) {
				getFolder().then(res => {
					this.columns = res.data
					this.columns.unshift({ name: "根目录", folderId: "0" })
				})
			} else {
				getFolder({ teamId: this.currentTeamId }).then(res => {
					this.columns = res.data
					this.columns.unshift({ name: "根目录", folderId: "0" })
				})
			}
		},
		treeConfirm(e) {
			this.folderName = e[e.length - 1].name
			this.fileObj.folderId = e[e.length - 1].folderId
		},
		moveConfirm() {
			saveFileData(this.fileObj).then(res => {
				if (res.code === 200) {
					this.moveModal = false
					this.$refs.uToast.show({
						type: 'success',
						message: "移动成功",
					})
					this.fileObj = {}
					this.folderName = ''
					this.getList({ queryType: this.queryType, folderId: this.folderId })
				}
			})
		},
		moveCancel() {
			this.moveModal = false
			this.folderName = ''
		},
		changeHandel(item) {
			this.current = item.index
			this.queryType = item.label
			this.getList({ queryType: item.label })
		},
		animationfinish(e) {
			this.current = e.detail.current
			this.queryType = this.list[e.detail.current].label
			this.getList({ queryType: this.list[e.detail.current].label })
		},
		deteleHandel(e) {
			if (e.type === 1) {
				uni.navigateTo({
					url: `/pages/index/detail/detail?fileId=${e.fileId}`,
				});
			} else {
				uni.navigateTo({
					url: '/pages/index/folder/folder?item=' + encodeURIComponent(JSON.stringify(e))
				});

			}
		},
		getList(args) {
			if (this.teamStatus) {
				args.teamId = this.currentTeamId
				getUserFileList(args).then(res => {
					this.swiperList = res.data.rows
				})
			} else {
				getUserFileList(args).then(res => {
					this.swiperList = res.data.rows
				})
			}
		},
		moreHandel(e) {
			if (e.type === 1) {
				this.showShare = true
				this.showEye = true
				this.showMove = true
				this.fileObj = e
				this.show = true
			} else {
				this.showShare = false
				this.showEye = false
				this.showMove = false
				this.fileObj = e
				this.show = true
			}
		},
		preview() {
			uni.navigateTo({
				url: `/pages/index/detail/detail?fileId=${this.fileObj.fileId}`,
			});
			this.show = false
		},
		close() {
			this.show = false
		},
		cancel() {
			this.showModal = false
			this.show = false
		},
		reductionHandel() {
			if (this.fileObj.type == 1) {
				reductionFile(this.fileObj.fileId).then(res => {
					this.show = false
					this.$refs.uToast.show({
						type: 'success',
						message: "还原成功～",
					})
					this.successHandel()
				})
			} else {
				reductionFolder(this.fileObj.folderId).then(res => {
					this.show = false
					this.$refs.uToast.show({
						type: 'success',
						message: "还原成功～",
					})
					this.successHandel()
				})
			}
		},
		delHadel() {
			if (this.fileObj.type == 1) {
				deleteFile(this.fileObj.fileId).then(res => {
					this.show = false
					this.$refs.uToast.show({
						type: 'success',
						message: "删除成功～",
					})
					this.successHandel()
				})
			} else {
				delFolder(this.fileObj.folderId).then(res => {
					this.show = false
					this.$refs.uToast.show({
						type: 'success',
						message: "删除成功～",
					})
					this.successHandel()
				})
			}

		},
		confirm(e) {
			this.fileObj.name = this.fileName
			if (this.fileObj.type == 1) {
				saveFileData(this.fileObj).then(res => {
					if (res.code === 200) {
						this.showModal = false
						this.show = false
						this.$refs.uToast.show({
							type: 'success',
							message: "修改成功～",
						})
						this.fileName = ''
						this.fileObj = {}
						this.successHandel()
					}
				})
			} else {
				upDataFolder(this.fileObj).then(res => {
					if (res.code === 200) {
						this.showModal = false
						this.show = false
						this.$refs.uToast.show({
							type: 'success',
							message: "修改成功～",
						})
						this.fileName = ''
						this.fileObj = {}
						this.successHandel()
					}
				})
			}
		},
		rename() {
			this.showModal = true
			this.show = false
		},
		successHandel() {
			this.getList({ queryType: this.queryType, folderId: this.folderId })
		},
	}
};
</script>

<style lang="scss" scoped>
button {
	background-color: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	cursor: pointer;
	outline: none;
}

button::after {
	border: none;
}

button {
	background-color: #fff;
}

.swiper {
	height: 87.8vh;

}

.swiper-item {
	height: 100%;
}

::v-deep .u-button {
	margin-top: 50rpx;
	width: 200px !important;
	border-radius: 50rpx !important;
	background-color: #4C75FF !important;

	.u-button__text {
		font-size: 18px !important;
	}
}

.menu {
	display: flex;
	justify-content: space-around;
	margin-bottom: 20rpx;
}

.file_name {
	font-size: 40rpx;
	font-weight: 400;
	color: #636363;
	padding: 50rpx 0 0 50rpx;
	margin: 20rpx 0;
}

.slot-content {
	width: 100%;
}
</style>